@require './palette'
#sidebar
    width $sidebar-width
    margin-right 1.5rem

.sidebar_top
    margin-bottom $card-margin

.sidebar_bottom
    padding 0 12px
    text-align center
    min-height auto

.avatar
    height 6rem
    width 6rem
    background-size cover
    background-position center
    background-color $theme-color
    border-radius 9999px
    margin-left auto
    margin-right auto
    margin-top 1rem

.author
    font-weight 700
    font-size 1.25rem
    margin-top 1rem

.summary
    display grid
    grid-template-columns repeat(3, auto)
    margin-top 1rem
    div > p:hover
        cursor pointer 
        color $theme-color

.connection
    display grid
    grid-template-columns repeat(2, auto)
    margin-top 1rem
    margin-bottom 1rem
    text-align left
    font-size 0.9rem
    line-height 1.3rem
    .grid_icon
        text-align center
    div > span
        padding-left 0.5rem
        padding-right 0.5rem
        transition all .2s ease
        &:hover
            cursor pointer 
            background-color var(--tag-color)
            border-radius 5px


@media (max-width: 767px)
    #sidebar
        width 91%
        margin-left auto
        margin-right auto
    .sidebar_top
        min-height auto
    .connection
        padding-left 2rem
